<!--
 * @Descripttion: ---
 * @version: v1.0.0.0
 * @Author: 任飞
 * @Date: 2020-06-26 14:34:00
 * @LastEditors: 任飞
 * @LastEditTime: 2020-07-07 15:01:35
--> 
<template>
  <div>
    <el-upload
      :auto-upload="true"
      :file-list="fileList"
      :http-request="myUpload"
      :action="remoteURL"
      :multiple="multiple"
      :limit="limit"
      list-type="picture-card">
      <i slot="default" class="el-icon-plus"/>
      <div slot="file" slot-scope="{file}">
        <img :src="file.url" class="el-upload-list__item-thumbnail">
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"/>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"/>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" width="100%">
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'

import { getToken } from '@/utils/auth'

export default {
  props: {
    example: {
      type: Boolean,
      default: true
    },
    imgs: {
      type: Array,
      default: function() {
        return []
      }
    },
    limit: {
      type: Number,
      default: 9
    },
    multiple: {
      type: Boolean,
      default: true
    },
    clickIndex: {
      type: Number,
      default: 0
    },
    imgType: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      remoteURL: "https://jinfang.xunyu.shop/common/file/uploadFile",
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: this.imgs
    }
  },
  computed: {},
  watch: {
    imgs: function(val) {
      this.fileList = val
    }
  },
  created() {},
  mounted() {
    console.log(this.fileList)
  },
  methods: {
    handleRemove(file) {
      const files = this.fileList
      files.forEach((v, i) => {
        if (v.uid === file.uid) {
          files.splice(i, 1)
        }
      })
      this.fileList = files
      // this.$emit("update-img", this.fileList)
      this.$emit("del-img", {imgs: this.fileList, index: this.clickIndex})
      console.log(files);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片
    myUpload(objFile) {
      const file = objFile.file
      const formURL = this.remoteURL
      const form = new FormData()
      form.append('file', file)
      console.log("---", file.uid)
      const settings = {
        async: true,
        crossDomain: true,
        url: formURL,
        headers: {
          'Authorization': getToken()
        },
        method: 'POST',
        processData: false,
        contentType: false,
        mimeType: 'multipart/form-data',
        data: form
      }
      axios(settings)
        .then(response => {
          let arr = [],
            temp = {}
          arr[0] = Object.assign({ url: response.data.data.fileUrl }, response.data.data)
          this.fileList = this.fileList.concat(arr)
          if (this.imgType && this.imgType === "sku") {
            temp = {
              arr: this.fileList,
              narrowFileNo: response.data.data.narrowFileNo,
              fileNo: response.data.data.fileNo,
              index: this.clickIndex
            }
          } else {
            temp = arr
          }
          this.$emit("update-img", temp)
          console.log(this.fileList)
        })
        .catch(error => {
          console.log(error)
          this.$message.error('文件上传失败，请重新上传')
        })
    }
  }
}
</script>
<style lang='less' scoped>
</style>